<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-left">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-input
              size="mini"
              v-model="listQuery.searchKey"
              placeholder="通知名称/负责人"
              class="filter-item"
              clearable
              @keyup.enter.native="handleFilter('searchKey')"
              @input="handleFilter('searchKey')"
            />
          </el-col>
          <el-col :span="3">
            <el-select
              size="mini"
              v-model="listQuery.alarmStyle"
              filterable
              clearable
              placeholder="选择通知类型"
              style="width: 100%"
              @change="handleFilter('alarmStyle')"
            >
              <el-option
                v-for="(item, index) in alarmStyleLists"
                :key="index + 'robot-task1'"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              size="mini"
              v-model="listQuery.alarmStatus"
              filterable
              clearable
              placeholder="选择状态"
              style="width: 100%"
              @change="handleFilter('alarmStatus')"
            >
              <el-option
                v-for="(item, index) in statusArr"
                :key="index + 'robot-task2'"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select
              size="mini"
              v-model="listQuery.filterDateType"
              filterable
              clearable
              placeholder="选择日期类型"
              style="width: 100%"
              @change="handleFilter('filterDateType')"
            >
              <el-option
                v-for="(item, index) in timeTypeArr"
                :key="index + 'robot-task3'"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="7">
            <el-date-picker
              size="mini"
              v-model="listQuery.filterDate"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleFilter('filterDate')"
            >
            </el-date-picker>
          </el-col>
          <!-- <el-col :span="2">
            <el-button
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
            >
              查询
            </el-button>
          </el-col> -->
        </el-row>
      </div>
      <div class="filter-right">
        <el-button
          icon="el-icon-plus"
          type="primary"
          size="mini"
          @click="handleAdd"
        >
          新增通知任务
        </el-button>
      </div>
    </div>
    <div class="error_text">
      注意：通知方式为钉钉发送通知，消息固定于每天早上10点发送，如未填写钉钉机器人配置信息，则默认发送到品牌钉钉群。
    </div>
    <div style="margin-bottom: 12px">
      <el-link type="primary" :href="pdfhref" target="_blank">点击查看使用说明文档<i class="el-icon-view el-icon--right"></i></el-link>
    </div>
    <el-table
      v-loading="listLoading"
      :data="pageList"
      border
      fit
      stripe
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column
        prop="alarm_name"
        label="通知名称"
        align="center"
        :show-overflow-tooltip="true"
        width="240"
      >
      </el-table-column>
      <el-table-column
        prop="alarm_style"
        label="通知类型"
        align="center"
        :show-overflow-tooltip="true"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="alarm_type"
        label="通知方式"
        align="center"
        width="120"
      >
        <template slot-scope="{ row }">
          <span
            v-for="(item, index) in robotAlarmTypeLists"
            :key="'4robot-task' + index"
          >
            <span v-if="row.alarm_type == item.code">{{ item.name }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="alarm_time"
        label="提前通知天数"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="alarm_endtime"
        label="通知截至日期"
        align="center"
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="alarm_status"
        label="状态"
        align="center"
        :show-overflow-tooltip="true"
        width="100"
      >
        <template slot-scope="{ row }">
          <b v-if="row.alarm_status == 'START'" style="color: #67c23a"
            >进行中</b
          >
          <b v-if="row.alarm_status == 'NOT_START'" style="color: #909399"
            >未开始</b
          >
          <b v-if="row.alarm_status == 'END'">已结束</b>
        </template>
      </el-table-column>
      <el-table-column
        prop="alarm_username"
        label="负责人"
        align="center"
        :show-overflow-tooltip="true"
        width="180"
      >
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="152">
        <template slot-scope="{ row }">
          <span>{{ row.created_at | formate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" width="152">
        <template slot-scope="{ row }">
          <span>{{ row.updated_at | formate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="alarm_content"
        label="通知内容"
        align="center"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleDataDetails(scope.row)"
            type="text"
            size="small"
            >详情</el-button
          >
          <el-button
            v-if="
              scope.row.alarm_status == 'NOT_START' ||
              scope.row.alarm_status == 'END'
            "
            @click="handleDetails(scope.row)"
            type="text"
            size="small"
            style="color: #67c23a"
            >启动</el-button
          >
          <el-button
            v-if="scope.row.alarm_status == 'START'"
            @click="handleDetails(scope.row)"
            type="text"
            size="small"
            style="color: #f56c6c"
            >结束</el-button
          >
          <el-button
            @click="handleModify(scope.row)"
            type="text"
            size="small"
            :disabled="scope.row.alarm_status == 'START'"
            >修改</el-button
          >
          <el-button
            @click="handleDelete(scope.row)"
            :disabled="scope.row.alarm_status == 'START'"
            type="text"
            size="small"
            :style="
              scope.row.alarm_status == 'START'
                ? 'color: #C0C4CC;'
                : 'color:#f56c6c'
            "
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getPageList"
    />

    <!-- 新增项目 -->
    <el-drawer
      size="50%"
      :close-on-press-escape="false"
      :visible.sync="dialogFormVisible"
      :title="title"
      :wrapperClosable="false"
    >
      <el-form :model="form" :rules="rules" ref="form" :disabled="isDetails">
        <el-row>
          <el-col :span="12">
            <el-form-item label="通知名称" label-width="120px" prop="alarmName">
              <el-input
                v-model="form.alarmName"
                autocomplete="off"
                maxlength="50"
                @input="changeValue('alarmName', '50')"
                placeholder="请输入通知名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="通知方式" label-width="120px" prop="alarmType">
              <el-select
                ref="selectAlarmType1"
                v-model="form.alarmType"
                filterable
                clearable
                placeholder="请选择通知方式"
                style="width: 100%"
                @change="alarmTypeSel"
              >
                <el-option
                  v-for="(item, index) in robotAlarmTypeLists"
                  :key="index + 'robot-task5'"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌" label-width="120px" prop="brandName">
              <el-select
                ref="selectBrandName1"
                v-model="form.brandName"
                filterable
                clearable
                placeholder="请选择品牌"
                style="width: 100%"
                @change="brandIdSel"
              >
                <el-option
                  v-for="(item, index) in brandsLists"
                  :key="index + 'robot-task6'"
                  :label="item.brand_name"
                  :value="item.brand_name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目" label-width="120px" prop="projectName">
              <el-select
                v-model="form.projectName"
                filterable
                clearable
                placeholder="请选择项目"
                style="width: 100%"
                @change="projectIdSel"
              >
                <el-option
                  v-for="(item, index) in projectLists"
                  :key="index + 'robot-task7'"
                  :label="item.project_name"
                  :value="item.project_name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="通知类型"
              label-width="120px"
              prop="alarmStyle"
            >
              <el-select
                v-model="form.alarmStyle"
                filterable
                clearable
                placeholder="请选择通知类型"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in alarmStyleLists"
                  :key="index + 'robot-task8'"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="负责人"
              label-width="120px"
              prop="alarmUseridArr"
            >
              <el-select
                multiple
                v-model="form.alarmUseridArr"
                filterable
                placeholder="请选择负责人"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in userLists"
                  :key="item.unionid + index"
                  :label="item.name"
                  :value="item.unionid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="通知截至日期"
              label-width="120px"
              prop="alarmEndtime"
            >
              <el-date-picker
                style="width: 100%"
                v-model="form.alarmEndtime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="提前通知天数"
              label-width="120px"
              prop="alarmTime"
            >
              <el-input-number
                v-model="form.alarmTime"
                @change="handleChange"
                :min="1"
                :max="1999"
                label="请输入提前多少天数通知"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="通知内容" label-width="120px" prop="alarmContent">
          <el-input
            type="textarea"
            rows="5"
            maxlength="200"
            resize="none"
            @input="changeValue('alarmContent', '200')"
            placeholder="请输入通知内容"
            v-model="form.alarmContent"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="通知配置内容"
          label-width="120px"
          prop="alarmInner"
        >
          <vue-json-editor
            v-model="form.alarmInner"
            :showBtns="false"
            :mode="'code'"
            lang="zh"
            :expandedOnStart="false"
            @json-change="onJsonSave"
            @json-save="onJsonSave"
            @has-error="onError"
          />
        </el-form-item>
        <div class="error_text">
          注意：任务默认为未启动状态,若要启动请至列表开启
        </div>
      </el-form>
      <div class="el_drawer_footerbtn">
        <el-button @click="resetForm('form')" style="margin: 0 10px">{{
          !isDetails ? "取 消" : "关 闭"
        }}</el-button>
        <el-button type="primary" @click="submitForm('form')" v-if="!isDetails"
          >确 定</el-button
        >
      </div>
    </el-drawer>

    <!-- 使用说明文档弹窗 -->
    <pdf :pdfurl="pdfurl" pdfcode="task" :hrefurl="pdfhref"></pdf>
  </div>
</template>
<script>
import index from "./index";
export default index;
</script>


<style lang="scss" scoped>
.filter-container {
  display: flex;
  justify-content: space-between;
}

.Charge-left {
  width: 375px;
  // height: 800px;
}

.Charge-left {
  width: 525px;
  // height: 800px;
}
</style>

<style>
.el-tooltip__popper {
  max-width: 30%;
}
</style>
